<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>医院挂号预约-登录界面</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/css/font-awesome.css}" rel="stylesheet">

    <link th:href="@{/css/animate.css}" rel="stylesheet">
    <link th:href="@{/css/style.css}" rel="stylesheet">
    <!--[if lt IE 9]>
    <meta http-equiv="refresh" content="0;ie.html" />
    <![endif]-->
    <script>if(window.top !== window.self){ window.top.location = window.location;}</script>

</head>
<!-- 算术验证码 -->
<script type='text/javascript'>

</script>
<script type="text/javascript">
    window.onload=function(){

    }
</script>
<style type='text/css'>
    #code{
        font-family:Arial,宋体;
        font-style:italic;
        color:green;
        border:0;
        padding:2px 3px;
        letter-spacing:3px;
        font-weight:bolder;
    }
    .action {
        padding: 5px 0px;
    }

    .cropped {
        width: 200px;
        border: 1px #ddd solid;
        box-shadow: 0px 0px 12px #ddd;
    }

    .img-preview {
        border-radius: 50%;
        box-shadow: 0px 0px 12px #7e7e7e;
        display: inline-block;
    }

    .preview-box {
        text-align: center;
        margin: 0px auto;
        margin-top: 10px;
        color: #bbb;
    }

    .preview-md {
        width: 128px;
        height: 128px;
    }

    .preview-sm {
        width: 96px;
        height: 96px;
    }

    .preview-xs {
        width: 64px;
        height: 64px;
    }

    .imageBox {
        border: 1px solid #aaa;
        overflow: hidden;
        cursor: move;
        box-shadow: 4px 4px 12px #B0B0B0;
        margin: 0px auto;
    }

    .btn-custom {
        float: right;
        width: 46px;
        display: inline-block;
        margin-bottom: 10px;
        height: 37px;
        line-height: 37px;
        font-size: 14px;
        color: #FFFFFF;
        margin: 0px 2px;
        background-color: #f38e81;
        border-radius: 3px;
        text-decoration: none;
        cursor: pointer;
        box-shadow: 0px 0px 5px #B0B0B0;
        border: 0px #fff solid;
    }
    /*选择文件上传*/
    .new-contentarea {
        width: 165px;
        overflow: hidden;
        margin: 0 auto;
        position: relative;
        float: left;
    }

    .new-contentarea label {
        width: 100%;
        height: 100%;
        display: block;
    }

    .new-contentarea input[type=file] {
        width: 188px;
        height: 60px;
        background: #333;
        margin: 0 auto;
        position: absolute;
        right: 50%;
        margin-right: -94px;
        top: 0;
        right/*\**/: 0px\9;
        margin-right/*\**/: 0px\9;
        width/*\**/: 10px\9;
        opacity: 0;
        filter: alpha(opacity=0);
        z-index: 2;
    }

    a.upload-img {
        width: 165px;
        display: inline-block;
        margin-bottom: 10px;
        height: 37px;
        line-height: 37px;
        font-size: 14px;
        color: #FFFFFF;
        background-color: #f38e81;
        border-radius: 3px;
        text-decoration: none;
        cursor: pointer;
        border: 0px #fff solid;
        box-shadow: 0px 0px 5px #B0B0B0;
    }

    a.upload-img:hover {
        background-color: #ec7e70;
    }

    .tc {
        text-align: center;
    }

</style>
<body class="gray-bg">

<div class="middle-box text-center loginscreen  animated fadeInDown">
    <div>
        <div>

            <h2 style="color: #0c0c0c">
                医院挂号平台系统注册
            </h2>

        </div>
        <form class="m-t" role="form" th:action="@{/register}" method="post">
            <p class="user-info-head" onclick="avatar()"><img class="img-circle img-lg" th:src="@{/img/blob.png}" th:onerror="'this.src=\'' + @{'/img/profile_small.jpg'} + '\''" style="width: 75px;height: 75px"></p>
            <div class="form-group">
                <input type="text" name="userId" class="form-control" placeholder="输入账号">
            </div>
            <div class="form-group">
                <input type="text" name="phone" class="form-control fa fa-eye-slash" placeholder="输入手机">
            </div>
<!--            <div class="form-group">-->
<!--                选择身份：-->
<!--                <select name="role" id="">-->
<!--                    <option value="超级管理员">超级管理员</option>-->
<!--                    <option value="业主">业主</option>-->
<!--                </select>-->
<!--            </div>-->
            <div class="form-group">
                <input type="password" name="password" class="form-control fa fa-eye-slash" placeholder="输入密码">
            </div>
            <button type="submit" class="btn btn-primary block full-width m-b">注册</button>
        </form>
    </div>
</div>

<!-- 全局js -->
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>

<!-- Message: alert整合包 -->
<script th:src="@{/js/bootstrapMessage.js}"></script>
<script th:src="@{/ajax/libs/layer/layer.min.js}">

</script>
<script>
    /*用户管理-头像*/
    function avatar() {
        var url = '/profile/avatar';
        top.layer.open({
            type: 2,
            area: [$(window).width() + 'px', $(window).height() + 'px'],
            fix: false,
            //不固定
            maxmin: true,
            shade: 0.3,
            title: "修改头像",
            content: url,
            btn: ['确定', '关闭'],
            // 弹层外区域关闭
            shadeClose: true,
            yes: function(index, layero) {
                var iframeWin = layero.find('iframe')[0];
                iframeWin.contentWindow.submitHandler(index, layero);
            },
            cancel: function(index) {
                return true;
            }
        });
    }
</script>
</body>

</html>
